<template>
	<div class="doctor_home">
		<div class="yygh_search">
			<ul>
				<li>
					<router-link to="/yygh" title="预约挂号" class="hover">预约挂号</router-link>
				</li>
				<li>
					<router-link to="/personal/history" title="我的预约" class="my_app">我的预约</router-link>
				</li>
			</ul>
		</div>
		<div class="content">
			<position>
				<router-link to="/">首页</router-link>
				&gt;
				<router-link to="/yygh">预约挂号</router-link>
				&gt;
				<router-link to="/yygh">选择科室医生</router-link>
				&gt;
				<span class="last">{{doctor.doctorName}}</span>
			</position>
			<div class="left_content">
				<!-- 医生简介 -->
				<div class="doctor_introduce">
					<div class="doctor_img">
						<img class="doctor-image" :alt="doctor.doctorName" v-lazy="DOCTOR_AVATAR+doctor.localDoctorId+'.jpg'"/>
					</div>
					<div class="doctor_message">
						<p class="doctor_name">{{doctor.doctorName}}</p>
						<p class="doctor_type font">{{doctor && DOCTOR_LEVEL[doctor.doctorLevel]}}</p>
						<p class="doctor_department font">科室：{{ doctor.orgDoctorList[0].deptName || '暂无'}}</p>
						<p class="doctor_good font">擅长：{{doctor && doctor.speciality && doctor.speciality.substr(0,10)}}</p>
					</div>
				</div>
				<!-- 个人简介 -->
				<div class="more_message">
					<div class="person_introduce">
						<div class="top">
							<img src="../../assets/中医.png" alt="">
							<span>个人简介</span>
						</div>
						<a href="javascript:;" title="查看更多" @click="dialog={show: true, title: '个人简介', content: doctor && doctor.introduce  || '暂无数据'}">查看更多 &gt;</a>
						<p class="introduce">
							{{doctor && doctor.introduce  || '暂无数据'}}
						</p>
					</div>
					<div class="person_introduce">
						<div class="top">
							<img src="../../assets/中医.png" alt="">
							<span>学术成就</span>
						</div>
						<a href="javascript:;" @click="dialog={show: true, title: '学术成就', content: doctor && doctor.scholarShip || '暂无数据'}">查看更多 &gt;</a>
						<p class="introduce">
								{{doctor && doctor.scholarShip || '暂无数据'}}
						</p>
					</div>
				</div>
				<!-- 满意度评价 -->
				<div class="evaluation">
					<p>患者满意度评价</p>
					<form action="" method="get" accept-charset="utf-8">
						<label for="">
						<input type="radio" name="evaluate" value="male" checked>非常满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male">较满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male" >不满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male" >很不满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male" >说不清楚</label>
						<br>
						<textarea v-model="areaText">	</textarea>
						<div class="send" @click="send">
							发送
						</div>
					</form>
				</div>
			</div>

			<div class="right_content">
				<!-- 公告板 -->
				<div class="bulletin_board">
					<div class="bulletin_board_title">
						<span>公告板</span>
						<a title="">更多 &gt;</a>
					</div>
					<div class="bulletin_board_news">
						<!-- <ul>
							<li v-for="i in 5" :key="i">
								<span class="yuan"></span>
								<span class="news_title">
									<a href="javascript:;" title="">{{doctor.doctorName}}医生本周六门诊取消，给广大患者造成不便，敬请谅解。
									</a>
								</span>
								<span class="date">2017-06-15</span>
							</li>
						</ul> -->
						<div class="no-data"> 暂无数据	</div>
					</div>
				</div>

				<div class="doctor_duty">
					<div class="doctor_duty_title">
						出诊时间表
					</div>
					<div class="doctor_schedule doctor-page">
              <ul>
                <li class="backward">
                  <div title="上一周" :class="['form_title', prevPage ? 'active_arrow': '']" @click="goPrevPage(0, doctor)"></div>
                  <div class="morning">上午</div>
                  <div class="noon">下午</div>
                </li>
								<div class="list-wrapper">
                  <div class="list-scroller" id="listScroller0">
									<li class="single_day" v-for="(day, i) in days" :key="day.orderDate1">
										<div class="form_title">
											{{day.orderDate1}}
											<br/>
											{{day.orderWeek2}}
										</div>
										<div class="morning" v-html="doctorDays[i].morning" @click="appointClickMorning(doctorDays[i], doctor, day)"></div>
										<div class="noon" v-html="doctorDays[i].noon" @click="appointClickNoon(doctorDays[i], doctor, day)"></div>
									</li>
									</div>
								</div>
                <li class="forward">
                  <div title="下一周" :class="['form_title', nextPage ? 'active_arrow': '']" @click="goNextPage(0, doctor)"></div>
                  <div class="morning"></div>
                  <div class="noon"></div>
                </li>
              </ul>
            </div>
				</div>
			</div>
		</div>

		<!-- dialog  -->
		<el-dialog :visible.sync="dialog.show" custom-class=" dialog-common">
			<div class="dialog-title" slot="title">
        {{dialog.title}}
      </div>
			<div style="line-height:2;">{{dialog.content}}</div>
			<div slot="footer" class=" center">
				<a href="javascript:;" class="common-main-button" @click="dialog.show=false">确定</a>
			</div>
		</el-dialog>

		 <div class="mask" v-if="mask_shown">
      <div class="alert_box four-cornor-wrapper">
        <i class="l"></i>
        <i class="r"></i>
        <i class="t"></i>
        <i class="b"></i>
        <div class="box_title">
          <span>用户须知</span>
        </div>
        <b class="clost_btn" v-on:click="mask_shown = false"></b>
        <div class="msg_content">
          <p v-for="msg in msg_content" v-bind:class="msg.class" :key="msg">{{msg.content}}</p>
        </div>
        <div class="center">
						<a href="javascript:;" class="common-main-button" @click="argeeHandle">我已经知晓</a>
        </div>
      </div>
    </div>
  
    <el-dialog :visible.sync="dialogShow" custom-class=" dialog-common">
      
      <div class="dialog-title" slot="title">
        请选择就诊时段 <small class="t1">{{dialogTitle}}</small>
      </div>
      <div class="select-time">
        <div class="time-box" v-for="(time, i) in times" :key="time.startTime">
          <a href="javascript:;" v-if="time.availableCount > 0" @click="timeClick(time, i)" :class="['sprites',time.isActive ? 'active' : '']">{{time.startTime}} - {{time.endTime}}</a>
          <a href="javascript:;" :class="['sprites','disable']" v-else>{{time.startTime}} - {{time.endTime}}</a>
        </div>
      </div>
			<div class="pd20 t4">{{timeTips}}</div>
      <div class="center" slot="footer"> 
					<a href="javascript:;" class="common-main-button" @click="confirmHandle">确定</a>
		<a href="javascript:;" class="common-sub-button" @click="dialogShow = false">取消</a>		
	  </div>
    </el-dialog>

	</div>
</template>
<script>
import Position from '../../components/Position'
import {commonAjax, ORG_ID, PLATFORM_PREFIX, APPOINT_TIPS, DOCTOR_AVATAR, DOCTOR_LEVEL} from '../../api/api'
export default {
	data() {
		let defaultDoctorDays = []
		for (let i = 0; i < 8; i++) {
			defaultDoctorDays.push({
				morning: '',
				noon: '',
				morningActive: false,
				noonActive: false,
				morningDepInfo: '',
				noonDepInfo: ''
			})
		}
		return {
			days: [],
			times: [],
				doctor: {
				speciality: '',
				orgDoctorList: [{deptName: ''}]
			},
			doctorDays: defaultDoctorDays,
			prevPage: false,
			nextPage: true,
			areaText: '',
			dialog: {
				show: false,
				title: '提示',
				content: ''
			},
			dialogShow: false,
			dialogTitle: '',
			msg_content: APPOINT_TIPS,
			DOCTOR_AVATAR: DOCTOR_AVATAR,
			DOCTOR_LEVEL: DOCTOR_LEVEL,
			mask_shown: false,
			isMorning: true,
			timeTips: ''
		}
	},
	mounted () {
		document.body.scrollTop = document.documentElement.scrollTop = 0
		if (!localStorage.accessToken) {
			this.$message({message: '请先登录', type: 'error'})
			return
		}
		if (!this.$route.query.uid) {
			this.$message({message: '接收参数有误', type: 'error'})
			return
		}

		// 获取医生基本信息
		this.getDoctorDetailByLocalDoctorIdCg(this.$route.query.uid)
		// 获去最近8天日期
		this.init()
	},
	methods: {
		send () {
			this.$store.commit('UPDATE_LOADING')
			setTimeout(() => {
				this.$store.commit('UPDATE_LOADING')
				this.areaText = ''
				this.$message({
					message: '发送成功，感谢您的反馈'
				})
			},600)
		},
		init () {
			let _this = this
			let uid = this.$route.query.uid
			this.$store.commit('UPDATE_LOADING')
			commonAjax([ORG_ID, '', '', localStorage.appointType || '1'], `${PLATFORM_PREFIX}.registrationService`, 'getTimePeriod').then(res => {
				this.$store.commit('UPDATE_LOADING')
				if (res.data.code === 200) {
					this.days = res.data.body
					commonAjax([ORG_ID, uid, localStorage.appointType || '1'], `${PLATFORM_PREFIX}.registrationService`, 'getDoctorPlanCgPc').then(res => {
						if (res.data.code === 200 && res.data.body) {
							let arrPb = res.data.body
							this.days.forEach((d, i) => {
								arrPb.forEach(pb => {
									_this.getSameDay(d, i, pb)
								})
							})
						}
					})	
				}
			}).catch(res => {
				this.$store.commit('UPDATE_LOADING')
			})
		},
		getSameDay (day, index, dep) {
			let _this = this
			if (dep.workDate === day.orderDate) {
				if (dep.planTime === '1') {
					this.doctorDays[index].morningDepInfo = dep
					if (dep.stopFlag === '1') {
						this.doctorDays[index].morning = '<div class="book_state_5">已停诊</div>'
					} else if (dep.status === '2') {
						this.doctorDays[index].morning = '<div class="book_state_4">已约满</div>'
					} else {
						this.doctorDays[index].morning = '<div class="book_state_1">可预约</div>'
						this.doctorDays[index].morningActive = true
					}
				} else {
					this.doctorDays[index].noonDepInfo = dep
					if (dep.stopFlag === '1') {
						this.doctorDays[index].noon = '<div class="book_state_5">已停诊</div>'
					} else if (dep.status === '2') {
						this.doctorDays[index].noon = '<div class="book_state_4">已约满</div>'
					} else {
						this.doctorDays[index].noon = '<div class="book_state_1">可预约</div>'
						this.doctorDays[index].noonActive = true
					}
				}
			}
		},
		getDoctorDetailByLocalDoctorIdCg (id) {
			commonAjax([ORG_ID, id, localStorage.appointType || '1'], `${PLATFORM_PREFIX}.doctorService`, 'getDoctorDetailByLocalDoctorIdCg').then(res => {
				if (res.data.code === 200) {
					this.doctor = res.data.body
				} else {
					this.$message({
						message: res.data.msg,
						type: 'error'
					})
				}
			}).catch(err => {
				localStorage.removeItem('accessToken')
				this.$message({
					message: '登录失效，请重新登录',
					type: 'error'
				})
			})
		},
		appointClickMorning(doctorDays, doctor, day) {
			this.isMorning = true
      if (!doctorDays.morningActive) {
        return false
      }
      this.saveInfo(doctorDays, doctor, day)
    },
    appointClickNoon(doctorDays, doctor, day) {
			this.isMorning = false
      if (!doctorDays.noonActive) {
        return false
      }
      this.saveInfo(doctorDays, doctor, day)
		},
		saveInfo(doctorDays, doctor, day) {
      if (this.isMorning) {
        localStorage.dep = JSON.stringify(doctorDays.morningDepInfo)
      } else {
        localStorage.dep = JSON.stringify(doctorDays.noonDepInfo)
      }
      localStorage.day = JSON.stringify(day)
      localStorage.doctor = JSON.stringify(doctor)
      if (localStorage.firstcome === '1') {
        this.argeeHandle()
      } else {
        localStorage.firstcome = '1'
        this.showDialog()
      }
		},
		showDialog() {
      this.mask_shown = true
      this.msg_content = APPOINT_TIPS
		},
		argeeHandle() {
      let dep = JSON.parse(localStorage.dep)
      let day = JSON.parse(localStorage.day)
      let localDeptId = dep.localDeptId
			let localDoctorId = dep.localDoctorId
      // 获取号源时间段
      this.mask_shown = false
      this.$store.commit('UPDATE_LOADING')
      commonAjax(
        [ORG_ID, dep.localRegDeptId, localDoctorId, dep.workDate, dep.seqId, localStorage.appointType || '1'],
        `${PLATFORM_PREFIX}.registrationService`,
        'getDocAndDeptSouce'
      ).then(res => {
				this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200 && res.data.body.length > 0) {
					this.dialogTitle = `（科室：${dep.deptName} —— 时间：${day.orderDate}）`
          this.dialogShow = true
          let d = res.data.body
          d.forEach(v => v.isActive = false)
          this.times = d
        } else {
					this.$message({
            message: '该医生的号源已经预约完',
            type: 'error'
          })
				}
      }).catch(res => console.warn(res))
    },
    confirmHandle() {
      let isSelect = this.times.some(time => time.isActive === true)
      if (isSelect) {
        this.$router.push('/yygh/confirm')
      } else {
        return false
      }
		},
		timeClick(time, i) {
      this.times.forEach(v => v.isActive = false)
      time.isActive = true
			localStorage.time = JSON.stringify(time)
			if (i === 0) {
        this.timeTips = '请您慎重选择欲诊时间，如果您未按时来院就诊，系统自动将您排在最后，谢谢您的配合！'
      } else {
        this.timeTips = ''
      }
    },
		goNextPage (index) {
      if (!this.nextPage) {
        return false
      }
      document.getElementById('listScroller'+index).style.transform = 'translate3d(-50%, 0, 0)'
      this.nextPage = !this.nextPage
      this.prevPage = !this.prevPage
    },
    goPrevPage (index) {
      if (!this.prevPage) {
        return false
      }
      document.getElementById('listScroller'+index).style.transform = 'translate3d(0, 0, 0)'
      this.nextPage = !this.nextPage
      this.prevPage = !this.prevPage
		}
	},
	components: {
		Position
	}
}
</script>
<style lang="less">
.doctor_home {
	padding-bottom: 60px;
		.el-dialog__body {padding: 0 20px 20px;}
	.yygh_search {
		width: 1080px;
		margin: 0 auto;
		height: 42px;
		background: url(../../assets/search_bg.png) 0 0 no-repeat;
		line-height: 42px;
		background-size: 100% 100%;
		overflow: hidden;
		margin-top: 30px;
	}
	.yygh_search li {
		float: left;
		list-style: none;
	}
	.yygh_search li a {
		text-decoration: none;
		color: #ffffff;
		font-family: Microsoft YaHei;
		font-size: 14px;
	}
	.yygh_search .hover {
		background: url("../../assets/hover.png") 0 0 no-repeat;
		-webkit-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		display: inline-block;
		line-height: 30px;
		width: 80px;
		margin-left: 30px;
		text-align: center;
	}
	.yygh_search .my_app {
		display: inline-block;
		margin-left: 70px;
		display: inline-block;
		line-height: 30px;
		width: 80px;
		margin-left: 38px;
		text-align: center;
	}
	.yygh_search .my_app:hover {
		background: url("../../assets/hover.png") 0 0 no-repeat;
		-webkit-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	.yygh_search .input_search label {
		color: #ffffff;
		font-family: Microsoft YaHei;
		font-size: 14px;
	}
	.yygh_search .input_search input {
		height: 28px;
		border-radius: 4px;
		border: 0px;
	}
	.yygh_search .doctor_search {
		margin-left: 290px;
	}
	.yygh_search .department_search {
		margin-left: 8px;
	}
	.yygh_search .search_button {
		height: 28px;
		width: 90px;
		background-color: #ee7100;
		border-radius: 4px;
		text-align: center;
		line-height: 28px;
		margin-top: 9px;
		font-size: 14px;
		color: #ffffff;
		margin-left: 10px;
	}
	.content {
		width: 1080px;
		margin: 0 auto;
		background-color: #ffffff;
		overflow: hidden;
		padding-bottom: 100px;
	}
	.content .left_content {
		width: 35%;
		float: left;
		margin-left: 15px;
	}
	.content .right_content {
		width: 63%;
		float: right;
		margin-top: 22px;
	}
	.content .left_content .doctor_introduce {
		background: url(../../assets/doctor_introduce.png) 0 0 no-repeat;
		height: 222px;
		width: 360px;
		margin-top: 22px;
	}
	.content .left_content .doctor_introduce div {
		float: left
	}
	.content .left_content .doctor_introduce .doctor_img {
		margin-top: 36px;
		margin-left: 10px;
	}
	.content .left_content .doctor_introduce .doctor_message {
		margin-top: 48px;
		margin-left: 30px;
	}
	.doctor_message .doctor_name {
		font-size: 18px;
		color: #993300;
		font-weight: bold;
		font-family: Microsoft YaHei;
	}
	.doctor_message .doctor_type {
		margin-top: 16px;
	}
	.doctor_message .font {
		color: #000000;
		font-size: 14px;
		font-weight: bold;
		font-family: Microsoft YaHei;
	}
	.doctor_introduce .apply {
		width: 80px;
		height: 22px;
		border: 1px solid #999966;
		margin-top: 30px;
		font-size: 14px;
		color: #999966;
		border-radius: 4px;
		margin-top: 46px;
		margin-left: 10px;
	}
	.doctor_introduce .apply img {
		margin-left: 2px;
	}
	.more_message {
		background: url(../../assets/医生bg.png) 0 0 no-repeat;
		-webkit-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		width: 360px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.more_message .person_introduce .top {
		background: url(../../assets/中医_bottom.png) 0 0 no-repeat;
		-webkit-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		display: inline-block;
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		width: 100px;
		text-align: center;
		margin-left: 5px;
	}
	.person_introduce .introduce {
		height: 195px;
		overflow: hidden;
	} 
	.more_message .person_introduce .top span {
		font-size: 16px;
		color: rgb( 158, 49, 15);
	}
	.more_message .person_introduce .top img {
		vertical-align: middle;
	}
	.more_message .person_achievement .bottom img {
		vertical-align: middle;
	}
	.more_message .person_introduce a {
		display: inline-block;
		margin-left: 170px;
		font-size: 14px;
		color: #ff6600;
	}
	.more_message .person_introduce p {
		font-size: 14px;
		color: #663333;
		width: 340px;
		margin: 20px auto;
		text-indent: 2em;
	}
	.more_message .person_achievement .bottom {
		background: url(../../assets/中医_bottom.png) 0 0 no-repeat;
		-webkit-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		display: inline-block;
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		width: 100px;
		text-align: center;
		margin-left: 5px;
	}
	.more_message .person_achievement .bottom span {
		font-size: 16px;
		color: #993300;
	}
	.more_message .person_achievement a {
		display: inline-block;
		margin-left: 170px;
		font-size: 14px;
		color: #ff6600;
	}
	.more_message .person_achievement p {
		font-size: 14px;
		color: #663333;
		width: 340px;
		margin: 20px auto;
		text-indent: 2em;
	}
	.evaluation label {
		font-size: 13px;
		color: #333333;
		font-family: Microsoft YaHei;
	}
	.evaluation {
		margin-top: 20px;
	}
	.evaluation p {
		font-size: 16px;
		color: #993300;
		margin-bottom: 20px;
	}
	.evaluation textarea {
		height: 72px;
		width: 360px;
		resize: none;
		margin-top: 20px;
	}
	.evaluation .send {
		background: url(../../assets/send.png);
		width: 114px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #ffcc99;
		font-size: 14px;
		margin: 20px auto;
		cursor: pointer;
	}
	.right_content .bulletin_board {
		width: 668px;
		height: 250px;
		border: 1px solid #cccccc;
	}
	.right_content .bulletin_board .bulletin_board_title {
		height: 32px;
		line-height: 32px;
		background-color: rgb( 248, 230, 206);
	}
	.right_content .bulletin_board .bulletin_board_title span {
		font-family: "FZLiShu-S01S";
		color: rgb( 158, 49, 15);
		font-size: 18px;
		margin-left: 20px;
	}
	.right_content .bulletin_board .bulletin_board_title a {
		font-size: 12px;
		font-family: "Microsoft YaHei";
		color: rgb( 102, 102, 102);
		text-decoration: none;
		margin-left: 520px;
	}
	.right_content .bulletin_board .bulletin_board_news .yuan {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: rgb( 169, 82, 36);
		margin-left: 22px;
		margin-right: 14px;
	}
	.right_content .bulletin_board .bulletin_board_news .news_title a {
		display: inline-block;
		font-size: 14px;
		font-family: "Microsoft YaHei";
		color: rgb( 51, 51, 51);
		width: 520px;
	}
	.right_content .bulletin_board .bulletin_board_news .date {
		font-size: 14px;
		font-family: "Microsoft YaHei";
		display: inline-block;
		color: #999999;
	}
	.right_content .bulletin_board .bulletin_board_news li {
		margin-top: 16px;
	}
	.right_content .doctor_duty .doctor_duty_title {
		font-family: "FZLiShu-S01S";
		color: rgb( 158, 49, 15);
		font-size: 18px;
		width: 670px;
		height: 32px;
		background-color: rgb( 248, 230, 206);
		line-height: 32px;
	}
	.right_content .doctor_duty .doctor_duty_title {
		padding-left: 20px;
	}
	.right_content .doctor_duty {
		margin-top: 40px;
	}
	.doctor_duty table {
		border: 1px solid #cccccc;
	}
	.doctor_duty table th {
		background-color: rgb(253, 245, 239);
	}
	.doctor_duty table td {
		text-align: center;
	}
	.doctor_duty table .message {
		height: 60px;
	}
}
</style>